<template>
  <div class="person">
    姓:<input type="text" v-model="firstName" /> <br />
    名:<input type="text" v-model="lastName" /> <br />
    姓名:<span>{{ fullName }}</span>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { computed, ref } from 'vue'

let firstName = ref('zhang')
let lastName = ref('san')
// fullName 是一个计算属性,只可读
let fullName = computed(() => {
  console.log(1)
  return (
    firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '--' + lastName.value
  )
})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
